<template >
  <div>
    <div style="text-align: right">
      <el-input
        placeholder="请输入内容"
        v-if="condition"
        v-model="condition.serialNo.value"
        @change="clearTable"
        style="width: 30%"
      >
      </el-input>
       <el-button
            type="primary"
            @click="() => $refs.table.searchForm()"
            :disabled="activeTab === '1' && !condition.serialNo.value"
            >查询</el-button
          >
    </div>
    <div>
      <el-tabs v-model="activeTab">
        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name" />
      </el-tabs>
      <comm-table
        ref="table"
        :columns="columns"
        :url="url"
        :condition="condition"
        @select="onSelectionChange"
        @selectAll="(rows) => onSelectAll(rows, $refs.table.$refs.table.renderData)"
        @changeData="(val) => handleSelect(val)"
      />
    </div>

    <div v-footer>
      <el-button type="primary" @click="onRelate" :loading="loading" :disabled="!multipleSelection.length">
        关联
      </el-button>
      <el-button @click="() => $emit('close')">关闭</el-button>
    </div>
  </div>
</template>
<script>
import tableSelect from '@/mixin/tableSelect';
import { mapState } from 'vuex';
import { BM_DEPT } from '@/common/codeDic';

import { handleColumnData } from '../../data-process';
export default {
  name: 'InfoModal',
  mixins: [tableSelect],
  props: {
    id: {
      type: String
    },
    columnData: { // 列表数据
      type: Array,
      default(){
        return [];
      }
    },
    isCheckSelectAuth: { // 是否进行勾选权限
      type: Boolean,
      default: false
    },
    selectRule: { // 选择规则
      type: Object,
      default(){
        return {};
      }
    }
  },
  data() {
    return {
      BM_DEPT,
      activeTab: '',
      loading: false,
      tabs: [
        { label: '系统推荐', name: '0' },
        { label: '手动关联', name: '1' }
      ],
      columns: [
        { label: '', type: 'selection', width: 80, renderSelectable: (row) => row.isAssociation === '0' },
        { label: '序号', type: 'index', width: 70 },
        { label: '信息编号', prop: 'serialNo', width: 200 },
        { label: '标题', prop: 'title' },
        { label: '上报时间', prop: 'sendTime' },
        { label: '上报单位', prop: 'createOrgCode', code:BM_DEPT }
      ],
      condition: null,
      url: ''
    }
  },
  computed: {
    ...mapState(['constant'])
  },
  created() {
    // 初始化表格的列
    this.initColumns();
    this.activeTab = '0';
  },
  mounted(){
    this.$store.dispatch('getConstantTree', ['BM_DEPT']);
  },
  watch: {
    activeTab(val) {
      const condition = {
        serialNo: {
          value: '',
          op: '='
        }
      };
      let dept_index = -1;
      if (val === '1') {
        // 手动关联-上报单位：sbrdwCode
        dept_index = _.findIndex(this.columns, {label: '上报单位'});

        if (dept_index != -1) {
          this.columns[dept_index]['prop'] = 'sbrdwCode';
        } else {
          this.columns.push({
            label: '上报单位',
            prop: 'sbrdwCode',
            code:BM_DEPT
          });
        }

        this.condition = {
          ...condition,
          sourceType: {
            value: '1',
            op: '='
          },
          labelType: {
            value: '0',
            op: '='
          },
          targetFlowId: { // 当前信息件id
            value: this.id,
            op: '='
          }
        };
        this.url = this.condition.serialNo.value ? '/v1/flowMain/search' : '';
      } else {
        // 系统推荐-上报单位：createOrgCode
        dept_index = _.findIndex(this.columns, {label: '上报单位'});

        if (dept_index != -1) {
          this.columns[dept_index]['prop'] = 'createOrgCode';
        } else {
          this.columns.push({
            label: '上报单位',
            prop: 'createOrgCode',
            code:BM_DEPT
          });
        }

        this.condition = {
          ...condition,
          tabType: {
            value: '1',
            op: '='
          },
          flowId: {
            value: this.id,
            op: '='
          }
        };
        this.url = '/v1/flowMain/queryAllAssociationFlowList';
      }
      this.multipleSelection=[]
    }
  },
  methods: {
    /**
     * 初始化表格的列
     */
    initColumns(){
      let columnData = handleColumnData(this, this.columnData, this.isCheckSelectAuth, this.selectRule);
      this.$set(this, 'columns', columnData);
    },
    /**
     * 关联
     */
    onRelate() {
      this.$emit('onRelate', this.multipleSelection);
      this.$emit('close');
    },

    clearTable() {
      if (this.activeTab === '1') {
        this.url = this.condition.serialNo.value ? '/v1/flowMain/search' : '';
      }
    }
  }
};
</script>
